<template>
  <div>
     <!-- 发表评论 -->
        <div class="cmes-Comment">
          <!-- 输入框 -->
          <textarea id="textareaId" class="cmes-textarea" cols="103" rows="10" v-model="message.content"></textarea>
          <!-- emoji -->
          <div class="cmes-emoji">
            <div class="cmes-emoji-title" @click="changeShow">
              <p v-if="isShow==0">戳我试试φ(≧ω≦*)♪</p>
              <P v-if="isShow==1">嘿嘿嘿o(*^＠^*)o</P>
            </div>
            <div class="cmes-emoji-icon" v-if="isShow==1">
                <span v-for="ejItem in emoji" :key="ejItem.id" :title="ejItem.name"  class="cmes-emoji-child" @click="toIcon(ejItem.icon)">{{ejItem.icon}}</span>
            </div>
          </div>
          <!-- 用户信息和发布留言 -->
          <div class="cmes-user">
            <div class="cmes-user-email">
              <i class="iconfont icon-yonghutouxiang1 cmes-user-icon"></i>
              <el-tooltip content="昵称不要超过5个字哦" placement="top" effect="light">
                 <el-input placeholder="昵称(必须name*)" v-model="user.nickname" clearable class="cmes-user-ipt" maxlength="5"  @change="isEmpty(user.nickname)"></el-input>
              </el-tooltip>
              <el-tooltip content="要输入正确的邮箱哦" placement="top" effect="light">
                <el-input type="email" placeholder="邮箱(必须email*)" v-model="user.account" clearable class="cmes-user-ipt" @change="rule(user.account)"></el-input>
              </el-tooltip>

            </div>
            <el-checkbox v-model="check">滴，学生卡|I'm not a robot</el-checkbox>
            <!-- <p class="cmes-user-btn" @click="insertMes">BiuBiuBiu~</p> -->
            <el-button size="700px" class="cmes-user-btn"  @click="insertMes" :disabled="!check">BiuBiuBiu~</el-button>
          </div>
        </div>
  </div>
</template>
<script>
export default {
  // toUid
  props:['grade','fromChildId','fromChildName','toUid'],
  inject:['reload'],//注入App里的reload方法
  data(){
    return {
      emoji:[],
      isShow:0,
      user:{
        user_id:"",
        nickname:"",
        account:"",
        avatar:"",
      },
      message:{
        mes_id:"",
        topic_id:"",
        topic_type:"",
        content:"",
        time:"",
        zd_id:"",
        zd_duration:"",
        from_uid:"",
        to_uids:"",
        fromChildId:"",
        fromChildName:""
      },
      check:0,
      isReply:false,
    }
  },
  mounted(){
    document.getElementById('textareaId').focus();
    this.getEmoji();
    this.getUser();
    this.message.time = new Date();
    // console.log("回复");
    // console.log(this.grade);
    // console.log(this.toUid);
    // this.message.to_uids = ""
    this.message.to_uids = this.toUid;
    // this.message.fromChildId = ""
    this.message.fromChildId = this.fromChildId;
    // console.log(this.fromChildId);
    // this.message.fromChildName = ""
    this.message.fromChildName = this.fromChildName;
    // console.log(this.fromChildName);
  },
  methods:{
    // 获取是否登录信息
    getUser(){
      let istrue = this.$store.getters.getShow;
      if(istrue){
        this.user = this.$store.getters.getUser;
        this.message.from_uid = this.$store.getters.getUser.user_id;
      }
    },
      // 获取emoji图标数据
    async getEmoji(){
      const {data:res} = await this.$http.get("emoji");
      // console.log(res);
      if(res.status != 200){
        this.$message.error('获取数据失败');
      }else{
        this.emoji = res.message;
      }
    },
    changeShow(){
      this.isShow = !this.isShow;
    },
    // 判断邮箱
    rule(account){
      var verify = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
        if (!verify.test(account)) {
            this.$message.error('邮箱格式错误, 请重新输入');
            this.user.account = "";
        } else {
            console.log(account);

        }
    },
    // 判断昵称
    isEmpty(nickName){
      if(nickName==""){
        this.$message({
          message: '昵称不能为空哦',
          type: 'warning'
        });
      }
    },
    toIcon(icon){
      this.message.content+=icon;
    },
    // 发表评论：真难呀
    async insertMes(){
      const user = this.user;
      // 判断昵称
      if(user.nickname==""){
         this.$message({
          message: '昵称不能为空哦！可以先登录或者填写昵称哦',
          type: 'warning'
        });
      }
      // 判断邮箱
      if(user.account==""){
         this.$message({
          message: '邮箱不能为空哦！可以先登录或者填写邮箱哦',
          type: 'warning'
        });
      }
      // 判断内容
      if(this.message.content==""){
        this.$message('哎呀，你是不是忘记写内容啦');
      }else{
        let istrue = this.$store.getters.getShow;
        // this.message.time = new Date();
        this.message.time = this.fileType.changeDate(new Date());
        this.message.topic_type = "留言";
        this.message.topic_id = 0;
        // console.log(this.message.time);
        // console.log("回复id");
        // console.log(this.message.to_uids);
        // 这是开始是发表评论

        if(istrue){// istrue判断是否登录
          console.log(this.message);
          const mes = JSON.stringify(this.message)
          console.log(mes);
          let grade = this.grade
          this.publishMes(mes,grade);//调用方法添加评论
          // this.fileType.publishMes(mes,grade);
        }else{
          console.log("没登录");
          // 没有登录的话要先创建用户，然后再添加评论数据
          // console.log(this.message);
          // console.log(this.user);
          // console.log("账号");
          // 这里在填写账号的时候要先查询看该账号是否被注册过，如果有：则直接返回id不用再注册，如果没有则注册
          const variate = this.user.account;
          // console.log(variate);
          const {data:selUser} = await this.$http.post("selectUser",{variate});
          if(selUser.status != 200){
              this.$message.error('查询数据失败');
          }else{
            // 查询成功：这里判断返回的数组是否为空，为空则表示未注册，反之注册了，就只需要传个参数id就可以了
            // console.log("这里是查询账号是否存在");
            // console.log(selUser);
            const newUser = JSON.stringify(this.user);
            var arr = selUser.message
            if(arr.length==0){
                //未注册过
                // 先注册user对象
                const {data:resUser} = await this.$http.post("registerUser",{newUser});//注册新用户
                // console.log("未注册过的");
                // console.log(resUser);
                // console.log("========");
                if(resUser.status!=200){
                  this.$message.error('注册失败');
                }else{
                  const {data:selResult} = await this.$http.post("selectUser",{variate});//查询新用户id
                  console.log(selResult);
                  this.message.from_uid = selResult.message[0].user_id;//将注册的新id赋值给 this.message.from_uid
                }
            }else{
              this.message.from_uid = selUser.message[0].user_id;
            }
            // 这里是第一步，看所需数据是否都齐全了
            // console.log("这里是第一步，看所需数据是否都齐全了");
            // console.log(this.message);
            // console.log(this.user);
            const mes = JSON.stringify(this.message);
            console.log(mes);
            let grade = this.grade
            this.publishMes(mes,grade);//调用方法添加评论

          }


        }
        this.message.content  = "";
        this.check=0;
      }

    },
    // 发表评论第二步
    async publishMes(mes,grade){
      //  let grade = this.grade
          if(grade==undefined){
            console.log("不回复");
            const {data:res} = await this.$http.post("insertMessage",{mes})
            // console.log(res);
            // console.log("-------------");

            if(res.status!=200){
              this.$message.error('发表评论失败');
            }else{
              this.$message({
                message: '发表成功',
                type: 'success'
              });

            }
          }else if(grade == 1){
            console.log("回复1");
            console.log(mes,grade);
            const {data:replyRes} = await this.$http.post("insertReply",{mes,grade});
            if(replyRes.status != 200){
              this.$message.error('添加回复失败');
            }else{
              this.$message({
                message: '发表成功',
                type: 'success'
              });
            }
          }else if(grade == 2){
            console.log("回复2");
            // const mes = JSON.parse(mes);
            // mes.from_childId = this.toUid;
            console.log(mes);
            console.log(grade);
            const {data:replyRes} = await this.$http.post("insertReply",{mes,grade});
            if(replyRes.status != 200){
              this.$message.error('添加回复失败');
            }else{
              this.$message({
                message: '发表成功',
                type: 'success'
              });
            }
          }
          this.reload();
    },
  }
}
</script>
<style scoped>
@import url('./mess.css');
</style>
